$codeW:120px;
$rad:16px;
.login{
  background-color:var(--color-white); border-radius:20px; width:412px; margin:0 auto; height:400px; padding:1px 33px; position: relative;
  .change{
    position: absolute; width: 60px; height: 66px; border-radius: 0 16px 0 0; background-color: var(--el-color-primary-light-5); right: 14px; top:14px; overflow: hidden; cursor: pointer;
    &::after{content: ''; display: block; position: absolute; left: 0; top: 0; border:70px solid transparent; border-left-color: #fff;}
    .login-wx,.login-ph{position: absolute; right: 10px; top:10px;}
    .login-wx{width: 37px;}
    .login-ph{width: 30px;}
    
  }
  :deep(.el-checkbox){
    height: 18px; vertical-align: middle; position: static; line-height: 18px;
    .el-checkbox__input{position: absolute; left: 0; top: 2px;}
    .el-checkbox__label{
      font-size: 12px; color: #666 !important;line-height: 18px; padding-left: 0;
    }
    .form-tips{
      margin-top: 15px; position: relative; padding-left: 24px;line-height: 18px;
      .k{color: #000; margin: 0 5px;font-size: 12px; cursor: pointer; display: inline-block; vertical-align: middle;}
    }
  }
  .login-wx-box{
    .login-wx-icon{width: 29px; margin-right: 8px;}
    .wx-img{
      width: 170px; height: 170px; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); margin: 0 auto 30px;
      img{display: block; width: 100%; height: 100%;}
      .tip{color: #404040; text-align: center;}
    }
  }
  .login-type-3{
    .title{display: block; text-align: center;}
    .tips{color: #9B9B9B; text-align: center; font-size: 14px; font-weight: normal;}
  }
  
  .title{font-size:24px; color: #000; font-weight:bold; margin-bottom:30px; margin-top:38px; display: flex; align-items: center; justify-content: center; height: 50px;}
  .login-bg{max-width:268px; display:block; margin:0 auto;}
  .submit-btn{width:100%; height: 50px; border-radius: $rad; font-size: 16px;}
  .login-content{margin-bottom: 10px;}
  
  .form-tips{
    margin-top: 15px; position: relative; padding-left: 20px;line-height: 18px;
    .k{color: #000; margin: 0 5px;font-size: 12px; cursor: pointer; display: inline-block; vertical-align: middle;}
  }
  :deep(.el-form-item){
    margin-bottom: 20px; position: relative;
    .el-input{height: auto !important; width: 100%;}
    .el-input__inner{height: 52px; font-size: 16px;}
    .el-input__wrapper{border-radius: $rad; background-color: #F7F7F7; box-shadow: none;}
    &.mobile-box{
      .num{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 60px; text-align: center; height: 22px; line-height: 22px; z-index: 8; border-right: 1px solid #D1D1D1; font-size: 16px;}
      .el-input__inner{padding-left: 65px; height: 52px; font-size: 16px;}
    }
    &.code-box{
      .code{position: absolute; right: 0; top: 0; width: $codeW; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 8; font-size: 16px; color: var(--el-color-primary); cursor: pointer;}
      .el-input__inner{padding-right: calc( $codeW + 10px); height: 52px; font-size: 16px;}
    }
  }
  :deep(.el-tabs){
    position: absolute; left: 0; top: 0; width: 100%;
    .el-tabs__nav-wrap:after{display: none;}
    .el-tabs__item{height: 30px;}
  }
  .html-box{margin: -20px -20px 0px; }
}
@media only screen and (max-width: 769px){
  .html-box{margin: 0px; }
  .login{
    width:100%;border-radius:0px; padding:0 0.3rem 0.3rem; height: auto;
    .logo{display: block; width: 1.6rem; margin:0  auto;}
    .title{font-size:0.44rem; margin:0.5rem auto 0.45rem; display: block; text-align: center; height: auto;}
    .change{display: none;}
    .submit-btn{margin: 0.1rem 0 0rem; height: 1rem; border-radius: 0.32rem; font-size: 0.32rem;}
    .form-tips{line-height: 1;}
    :deep(.el-form-item){
      margin-bottom: 0.28rem;
      .el-input{height: auto !important; width: 100%; ;}
      .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 0.32rem;}
      .el-input__inner,.el-textarea{min-height: 1rem;}
      .el-input__wrapper,.el-textarea__inner{border-radius: 0.32rem; background-color: #F7F7F7; box-shadow: none; font-size: 0.32rem;}
      .el-textarea__inner{padding: 10px 15px;}
    }
    :deep(.el-checkbox__label),.form-tips{
      font-size: 0.26rem;
    }
  }
}

.html{max-height: calc(80vh - 50px);}